<template>
	<view class="main">
		<uni-nav-bar @clickLeft="back" left-icon="left" title="执行单详情" background-color="#007AFF" color="#000"
			statusBar="true"></uni-nav-bar>

		<scroll-view class="scrollView" scroll-y="true" :style="{height: setcollapseheight() + 'px'}">

			<view class="itemBox">
				<view class="itemContent">
					<view class="itemTitle">执行单编号:</view>
					<view class="itemValue">{{formData.executeNo||"--"}}</view>
				</view>
				<view class="itemContent">
					<view class="itemTitle">订单状态:</view>
					<view class="itemValue">{{getOrderStatus(formData.status)}}</view>
				</view>
				<view class="itemContent">
					<view class="itemTitle">服务分类:</view>
					<view class="itemValue">{{formData.serviceTypeName||"--"}}</view>
				</view>
				<view class="itemContent">
					<view class="itemTitle">执行单类型:</view>
					<view class="itemValue">{{getOrderType(formData.executeType)}}</view>
				</view>
				<view class="itemContent" v-if="formData.status == 1">
					<view class="itemTitle">执行服务项目:</view>
					<view class="itemValue">{{formData.serviceProjectName||"--"}}</view>
				</view>
				<view v-if="formData.status===2" class="itemContent">
					<view class="itemTitle">项目预估进度：</view>
					<view class="itemValue">{{workObj.num||0}}%</view>
				</view>
				<view class="itemContent">
					<view class="itemTitle">项目订单名称:</view>
					<view class="itemValue">{{formData.projectName||"--"}}</view>
				</view>
				<view class="itemContent">
					<view class="itemTitle">项目订单编号:</view>
					<view class="itemValue">{{formData.projectNo||"--"}}</view>
				</view>
				<!-- <view class="itemContent">
					<view class="itemTitle">项目合同:</view>
					<view @click="lookDetail()" class="lookDetail">查看详情</view>
				</view> -->
				<view class="itemContent">
					<view class="itemTitle">业务运营方:</view>
					<view class="itemValue">{{formData.providerName||"--"}}</view>
				</view>
				<view class="itemContent">
					<view class="itemTitle">创建时间:</view>
					<view class="itemValue">{{formData.createTime||"--"}}</view>
				</view>
				<view class="btnBox">
					<view class="lookCompleted" @click="GotoConfirmation('执行单')">
						查看执行单
					</view>
					<view class="lookClose" @click="editOrder" v-if="formData.status == 0">
						变更执行单
					</view>
					<view class="lookClose" @click="takeOrder" v-if="formData.status == 0">
						接单
					</view>
					<view class="del" @click="complaints" v-if="[2, 3, 4].includes(formData.status)">
						异常订单申诉
					</view>
				</view>
			</view>

		</scroll-view>


		<!-- 接单 -->
		<u-modal cancelColor="#e74436" confirmText="确定" cancelText="返回" showCancelButton @cancel="modalshow=false"
			@confirm="confirm" :show="modalshow" title="接单">
			<view class="slot-content">
				<view style="height: 100rpx;line-height: 100rpx;">
					确定同意执行单并接单吗？
				</view>
			</view>
		</u-modal>

	</view>
</template>

<script>
	import orderCenterApi from '@/api/socialized-servce/order-center/index.js'
	import workOrderApi from '@/api/socialized-servce/order-center/workOrder.js'
	export default {
		components: {

		},
		data() {
			return {
				modalshow: false,
				page: 1,
				size: 10,
				total: 0,
				totalPages: 0,
				loading: false,
				postList: [],
				formData: {
					status: 1
				},
				workObj: {},
				serviceObj: {},
				OrderStatusList: [
					{
						name: "待接单",
						value: 0
					},
					{
						name: "待变更",
						value: 1
					},
					{
						name: "已接单",
						value: 2
					},
					{
						name: "已完成",
						value: 3
					},
					{
						name: "已中止",
						value: 4
					},
				],
			}
		},
		onLoad(e) {
			if (Object.keys(e).length) {
				this.queryOrder(e.no)
			}
		},
		mounted() {
			this.setcollapseheight()
		},
		methods: {
			// 查看订单详情
			lookDetail() {
				let list = this.formData.orderContractList || []
				let url = '/pages/socialized-service/order-center/contract-list'
				this.$togo(url, list)
			},
			//查询项目订单信息
			queryOrder(value) {
				orderCenterApi.queryOrder(value).then(res => {
					this.formData = res.data || {}
					this.serviceObj = res.data && res.data.serviceObj || {}
					uni.setStorageSync('ProjectOrderDetails', JSON.stringify(res.data))
					// 查询进度
					if (this.formData.status === 2) {
						this.sumByProjectNo()
					}
				})
			},
			//查村作业进度
			sumByProjectNo(value, quantity) {
				let api = this.formData.executeType == 1 ? 'sumByExecuteNo' : 'sumAmountByExecuteNo'
				workOrderApi[api]({
					executeNo: this.formData.executeNo
				}).then(res => {
					if (res.code == 200) {
						let quantity = this.formData.executeType == 1 ? this.formData.quantity : this.formData.executeAmount
						this.workObj.value = res.data ? (Number(res.data) || 0) : 0
						this.workObj.quantity = quantity
						let num = (this.workObj.value / this.workObj.quantity).toFixed(2) * 100
						this.$set(this.workObj, 'num', num)
					}
				})
			},
			getOrderStatus(value) {
				let rut = this.OrderStatusList.find((item) => {
					return item.value == value;
				});
				return rut && rut.name;
			},
			getOrderType(value) {
				if (value == 0) {
					return '采购单'
				} else if (value == 1) {
					return '服务单'
				} else {
					return '--'
				}
			},
			//异常订单申诉
			complaints() {
				let url = '/pages/socialized-service/order-center/abnormal-order-complaints'
				let params = {
					data: JSON.stringify(this.formData)
				}
				this.$togo(url, params)
			},
			GotoDetail(title) {
				let params = {
					data: JSON.stringify({
						pageTitle: title,
						...this.formData
					})
				}
				let url = '/pages/socialized-service/order-center/quotation-appointment'
				this.$togo(url, params)
			},
			editOrder() {
				let form = this.formData
				form.quantity = 10
				let params = {
					data: JSON.stringify(form)
				}
				let url = '/pages/socialized-service/order-center/edit-order-add/edit-order-add'
				this.$togo(url, params)
			},
			GotoConfirmation(title) {
				let params = {
					data: JSON.stringify({
						pageTitle: title,
						...this.formData
					})
				}
				let url = '/pages/socialized-service/order-center/confirmation-detail'
				this.$togo(url, params)
			},
			takeOrder() {
				this.modalshow = true
			},
			confirm() {
				let executeNo = this.formData.executeNo
				orderCenterApi.receiveOrder(executeNo).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '接单成功',
							icon: 'none'
						})
						this.modalshow = false
						this.$togo('/pages/socialized-service/order-center/order-center')
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			setcollapseheight() {
				let topheightone = uni.upx2px(36)
				let winHeight = 0
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.windowHeight
					}
				});
				let oldHeight = uni.upx2px(56)

				winHeight = parseInt(winHeight) - topheightone - oldHeight
				// #ifndef H5
				winHeight = winHeight - 20

				// #endif
				return winHeight
			},

		}

	}
</script>

<style lang="scss" scoped>
	.scrollView {
		padding: 30rpx 30rpx 0rpx;
		box-sizing: border-box;
	}

	.itemBox {
		margin: 10rpx auto 0rpx;
		padding: 12rpx 30rpx;
		box-sizing: border-box;
		margin: 0 auto;
		width: 100%;
		height: 85vh;
		opacity: 1;
		border-radius: 16rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 0rpx 12rpx rgba(0, 0, 0, 0.05);

		.itemContent {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;
			min-height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			color: rgba(39, 39, 39, 1);
			border-bottom: 2rpx solid rgba(235, 235, 235, 1);

		}

		.itemTitle {
			min-width: 200rpx;
		}

		.itemValue {
			width: 400rpx;
			line-height: 40rpx;
		}

		.lookDetail {
			border-radius: 20rpx;
			box-sizing: border-box;
			width: 150rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			background-color: #84a9ff;
			border: 2rpx solid #5555ff;
			color: #fff;

		}
	}

	.contant {}

	.popup-photo {
		width: 80vw;
		height: 80vh;
	}

	.btnBox {
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		color: #ffffff;
		margin-top: 20rpx;
		// text-align: center;

		.lookClose,
		.lookCompleted,
		.review,
		.del {
			margin-top: 20rpx;
			min-width: 140rpx;
			height: 58rpx;
			line-height: 58rpx;
			border-radius: 30rpx;
			padding: 4rpx 12rpx;
			text-align: center;
			margin-left: 8rpx;
			background: linear-gradient(270deg, rgba(136, 172, 255, 1) 0%, rgba(33, 101, 255, 1) 100%);

		}

		.lookCompleted {}

		.del {
			background: linear-gradient(270deg, rgba(249, 170, 170, 1) 0%, rgba(255, 108, 108, 1) 100%);
		}
	}
</style>